<template>
    <div>
        <h2>{{ title }}</h2>
        <input type="text" v-model="title">
        <button @click="editTitle">修改</button>
        <ul>
            <li v-for="(item,index) in title" :key="index" @click="ty(item,index)">{{ item }}</li>
        </ul>
        <button @click="add">添加</button>
    </div>
</template>

<!-- 
    如果在script 写入ts 需要声明lang属性
-->
<script lang="ts">
  //beforeCreated+created = setup
//   ref()方法 用来定义一个响应式变量
import {ref} from 'vue' 


// ref对象实现数据响应式的原理：Object.defineProperty



// import type {Ref} from 'vue'
export default {
    setup () { 
      //通过ref 定义一个响应式变量


        // let title =ref('初始值') //类型推导
        // let title =ref<String>('初始值') //声明ts 的string
        let title =ref(['11','22','33','44','55']) //声明ts 的string
        //最好用const定义
        function editTitle(){
            console.log(title)//ref对象
            // title.value='111'//修改
            // console.log(title.value)//获取
            // title='xxxx' //错误
            
        }
        function add(){
        //    title.value.push('66')
        title.value[0]='120'//可以更新 解决了vue2的文，

        }
        function ty(c:string,d:number){
            console.log(c)
            title.value.splice(d,1)
        }
        // let editTitle=()=>{

        // }
        // let title:Ref<string>=ref('张三')     //仅了解


        //这种方式定义的变量只是一个普通变量，没有响应式


        return {
            title,
            editTitle,
            add,
            ty
        }
    }
}
</script>

<style lang="scss" scoped>

</style>